import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Modal, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { PrinterOutlined } from '@ant-design/icons';
import QuotationSearch from './QuotationSearch';
import styles from './styles.less';
import request from '@/utils/request';
import TempleteQuote from '../PrintTemplete/TempleteQuote';
import PrintModal from '@/components/PrintModal';
import { FormattedMessage, useIntl } from 'umi';

const { Text } = Typography;

const ViewPage: React.FC<any> = () => {
  const [params, setParams] = useState<any>({});
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [dataSource, setDataSource] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const printArea = useRef<any>();
  const intl = useIntl();

  useEffect(() => {
    query();
  }, [params, pageNumber, pageSize]);

  const query = () => {
    if (params.orderNum) {
      setLoading(true);
      request('/api/services/app/OrderHed/GetOrderQuote', {
        method: 'GET',
        params: { num: params.orderNum },
      }).then((response) => {
        if (response) {
          if (response.success) {
            setDataSource(response.result);
          }
          setLoading(false);
        }
      });
    }
  };

  const handlePageChange = (pageNumber: any, pageSize: any) => {
    setPageNumber(pageNumber);
    setPageSize(pageSize);
  };

  const handleSearch = (values: any) => {
    setParams(values);
    setPageNumber(1);
  };

  const handlePrint = () => {
    setVisible2(true);
  };

  const columns: ColumnsType<any> = [
    {
      title: <FormattedMessage id="pages.partNum" />,
      dataIndex: 'partNum',
      width: 100,
    },
    {
      title: <FormattedMessage id="pages.partDescription" />,
      dataIndex: 'lineDesc',
    },
    {
      title: <FormattedMessage id="pages.revision" />,
      width: 50,
      dataIndex: 'revisionNum',
    },
    {
      title: <FormattedMessage id="pages.quantity" />,
      dataIndex: 'quantity',
    },
    {
      title: <FormattedMessage id="pages.IUM" />,
      width: 50,
      dataIndex: 'ium',
    },
    {
      title: <FormattedMessage id="pages.unitCost" />,
      dataIndex: 'unitCost',
    },
    {
      title: <FormattedMessage id="pages.laborCost" />,
      dataIndex: 'lbrCost',
    },
    {
      title: <FormattedMessage id="pages.miscCost" />,
      dataIndex: 'miscCost',
    },
    {
      title: <FormattedMessage id="pages.totalCost" />,
      fixed: 'right',
      width: 150,
      dataIndex: 'totalCost',
    },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Card>
        <QuotationSearch defaultParams={{}} onSearch={handleSearch}>
          <Button icon={<PrinterOutlined />} onClick={handlePrint}>
            <span><FormattedMessage id="pages.print" /></span>
          </Button>
        </QuotationSearch>
        <Table
          className={styles.tableScroll}
          rowKey="id"
          size="small"
          columns={columns}
          dataSource={dataSource.items}
          loading={loading}
          scroll={{ x: 'max-content' }}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: handlePageChange,
            onShowSizeChange: handlePageChange,
          }}
          summary={list => {
            let total = 0;
            list.forEach(({ totalCost }) => {
              total += parseFloat(totalCost.toString());
            });

            return (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell index={0}></Table.Summary.Cell>
                  <Table.Summary.Cell index={1}>
                    <FormattedMessage id="pages.tax" />：<Text type="danger" strong>￥{dataSource.totalTax}</Text>，
                    <FormattedMessage id="pages.taxCost" />：<Text type="danger" strong>￥{dataSource.totalTaxCost}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell index={2}></Table.Summary.Cell>
                  <Table.Summary.Cell index={3}></Table.Summary.Cell>
                  <Table.Summary.Cell index={4}></Table.Summary.Cell>
                  <Table.Summary.Cell index={5}></Table.Summary.Cell>
                  <Table.Summary.Cell index={6}></Table.Summary.Cell>
                  <Table.Summary.Cell index={7}><FormattedMessage id="pages.unTaxCost" />：</Table.Summary.Cell>
                  <Table.Summary.Cell index={8}>
                    <Text type="danger" strong>￥{total}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            );
          }}
        />
      </Card>
      <div ref={printArea} hidden>
        <TempleteQuote data={dataSource} ref={printArea} hidden />
      </div>
      <Modal
        width={1024}
        title={intl.formatMessage({ id: 'pages.print' })}
        visible={visible2}
        destroyOnClose={true}
        onCancel={() => setVisible2(false)}
        footer={false}
      >
        <PrintModal>
          <TempleteQuote data={dataSource} ref={printArea} hidden />
        </PrintModal>
      </Modal>
    </PageHeaderWrapper>
  );
};

export default ViewPage;
